<template>
  <basic-container>
    <avue-crud
        ref="crud"
        v-model="form"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        :before-open="beforeOpen"
        @on-load="getList"
        @search-change="searchChange"
        @search-reset="searchReset"
        @row-update="handleUpdate"
    >

      <template v-slot:tipsForm="{ row }">
       <b>
         配置项设置0值时为不限制
       </b>
      </template>
      <template v-slot:status="{ row }">
        <el-switch
            v-model="row.status"
            :active-value="CANNED_STRATEGY_STATUS.ON"
            :inactive-value="CANNED_STRATEGY_STATUS.OFF"
            @change="changeStatus(row)"
        ></el-switch>
      </template>
      <template v-slot:configForm="{ row }">
        <div
            class="spacing-b"
            v-for="item in form.ruleList"
            :key="item.id"
        >
          {{ item.name }}:
          <el-input-number
              v-model="item.number"
              :min="0"
              :max="999999"
              :precision="0"
              :controls="false"
              :label="'item.name'"
          ></el-input-number>
        </div>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {
  putObjStatus,
  fetchList,
  putObj,
  getObj,
} from '@/api/core/cannedStrategy';
import {tableOption} from '@/const/crud/points/canned-strategy';
import detailPopup from '../../pet/base-file/components/detailPopup.vue';
import {mapGetters} from 'vuex';
import crudMixins from '@/mixins/crud';
import {CANNED_STRATEGY_STATUS} from "@/const/type";

export default {
  name: 'cannedManage',
  components: {detailPopup},
  mixins: [crudMixins],
  data() {
    return {
      CANNED_STRATEGY_STATUS,
      editVisible: false,
      form: {},
      tableOption: tableOption(),
      userId: null,
      petId: null,
      petDetailVisible: false,
      addVisible: false,
    };
  },
  computed: {

    ...mapGetters(['permissions']),
  },
  methods: {
    edit(row) {
      this.editVisible = true;
      this.userId = row.userId;
    },
    // 列表查询
    getList(page, refresh) {
      if (refresh) {
        this.page.current = 1;
        this.page.currentPage = 1;
      }
      this.tableLoading = true;
      fetchList(
          Object.assign(
              {
                current: this.page.currentPage,
                size: this.page.pageSize,
              },
              this.searchForm
          )
      )
          .then((response) => {
            this.tableData = response.data.data.records;
            this.page.total = response.data.data.total;
            this.tableLoading = false;
          })
          .catch(() => {
            this.tableLoading = false;
          });
    },
    // 打开前的拦截
    async beforeOpen(done, type) {
      if (type !== 'add') {
        const res = await getObj(this.form.id);
        this.form = {...res.data.data};
      }
      done();
    },
    // 编辑
    async handleUpdate(row, index, done, loading) {
      try {
        await putObj({id: row.id, remark: row.remark, ruleList: row.ruleList,name:row.name});
        done();
        this.$message.success('修改成功');
        this.getList();
      } catch (error) {
        loading();
        throw new Error(error);
      }
    },
    showPetDetail(id) {
      this.petId = id;
      this.petDetailVisible = true;
    },
    async changeStatus(row) {
      this.tableLoading = true;
      try {
        const res = await putObjStatus(row.id, row.status);
        this.tableLoading = false;
      } catch (e) {
        this.tableLoading = false;
      }
      this.getList();
    },
  },
};
</script>
<style scoped>
.spacing-b{
  margin-bottom: 20px;
}
</style>
